<template>
  <view class="my-welfare">
    <view class="box-top"> </view>
    <view class="help-total">
      <view class="info-box">
        <view>
          <view class="num">{{ total.count }}</view>
          <view class="txt">捐款次数(次)</view>
        </view>
        <view>
          <view class="num">{{ total.money }}</view>
          <view class="txt">捐款额度(元)</view>
        </view>
      </view>

      <view class="donations-btn" @click="go_page">我要捐款</view>

      <!-- <view class="total">
        已有<text class="color">34234</text>人进行过捐助，
        <view> 您的捐款额度已经超过<text class="color">98%</text>的会员 </view>
      </view>
      <view class="history">历史捐款</view> -->
    </view>

    <!-- <view class="box">
      <view class="title">活动</view>
      <view class="plan-list" @click="go_activity">
        <view class="plan">
          <view class="title">药品计划</view>
          <view class="txt">规律用药贡献金</view>
          <view class="watch-btn">去查看</view>
        </view>
        <view class="plan plan-lan">
          <view class="title">一老一小关注计划</view>
          <view class="txt">解除中年人的家庭焦虑</view>
          <view class="watch-btn">去查看</view>
        </view>
      </view>
    </view> -->

    <view class="plan">
      <view class="plan-title">计划</view>
      <swiper class="plan-swiper" autoplay :circular="true" :interval="2000">
        <swiper-item v-for="(item, index) in welfarePlanList" :key="index" @click="goWelfarePlan(item)">
          <view class="plan-img">
            <img :src="item.path" :alt="item.title" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- TODO: 暂时隐藏，需要逻辑支持 -->
    <!-- <view class="box">
      <view class="title">小任务</view>
      <view class="task">
        <image class="task-icon" src="../../static/icon/task.png"></image>
        <view class="explain">
          <view class="title">天天领守护金兑红包</view>
          <view class="des">兑换分摊红包，过期就消失啦！</view>
        </view>
        <view class="go-get">去领取</view>
      </view>
      <view class="task">
        <image class="task-icon" src="../../static/icon/task.png"></image>
        <view class="explain">
          <view class="title">天天领守护金兑红包</view>
          <view class="des">兑换分摊红包，过期就消失啦！</view>
        </view>
        <view class="go-get">去领取</view>
      </view>
    </view> -->

    <view class="box">
      <view class="title">爱尔邀您参与</view>
      <view class="activity">
        <view class="activity-img"> </view>
        <view class="activity-txt">
          <view class="activity-title">邀亲友，享</view>
          <view class="activity-des">每位亲友加入，都将有机会获得1分免费大病保障，最多可为他减少100万大病花费</view>
        </view>
      </view>
    </view>

    <view class="honor">
      <view class="honor-list">
        <image class="honor-icon" src="../../static/icon/honor-1.png"></image>
        <view class="honor-view border-1">
          <view class="l">我的荣誉</view>
          <view class="r">
            8颗之星
            <image class="right-icon" src="../../static/icon/right.png"></image>
          </view>
        </view>
      </view>
      <view class="honor-list" @click="go_join">
        <image class="honor-icon" src="../../static/icon/honor-2.png"></image>
        <view class="honor-view">
          <view class="l">家庭</view>
          <view class="r">
            为家人加入
            <image class="right-icon" src="../../static/icon/right.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { publicBenefitDonationStat } from '@/api/welfare';
import { getAds } from '@/api/index';
import { getUserInfoByPatientId } from '@/api/join.js';

export default {
  data() {
    return {
      total: {
        count: 0,
        money: 0
      },
      welfarePlanList: []
    };
  },

  onLoad() {
    this.init();
  },

  methods: {
    async init() {
      const id = this.$store.state.join.patientid;
      const res = await publicBenefitDonationStat(id);
      if (res.data) {
        this.total = res.data;
      }
      // 获取计划
      getAds('项目小程序-首页-计划轮播').then((res) => {
        if (res.code === 0) {
          this.welfarePlanList = res.data;
        } else {
          uni.showToast({ title: '获取计划广告失败' });
        }
      });
    },

    // 去捐款
    go_page() {
      this.$wxPromise.navigateTo({
        url: '/pages/donations/index'
      });
    },

    // 查看活动
    go_activity() {
      console.log('查看活动');
    },

    goWelfarePlan(item) {
      this.$wxPromise.navigateTo({
        url: '/pages/web-view/web-view?url=' + item.url
      });
    },

    // 为家人加入
    go_join() {
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
          this.$wxPromise.navigateTo({
            url: '/pages/join/form?fromPage=1'
          });
        } else {
          this.$wxPromise.navigateTo({
            url: '/pages/join/authorIdentityChaeck'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.my-welfare {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .box-top {
    background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
    height: 240rpx;
  }
  .help-total {
    margin: 24rpx;
    padding: 40rpx 24rpx 30rpx;
    border-radius: 24rpx;
    background: #ffffff;
    margin-top: -180rpx;
    box-sizing: border-box;

    box-shadow: 0px 6rpx 6rpx rgba(200, 22, 29, 0.1);
  }
  .info-box {
    display: flex;
    justify-content: space-around;
    text-align: center;
    .num {
      font-size: 48rpx;
      font-weight: 500;
      color: #000000;
    }
    .txt {
      font-size: 26rpx;
      color: #9b9b9b;
    }
  }
  .border-1::after {
    position: absolute;
    content: '';
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transform: scale(0.5);
    transform-origin: left top;
  }

  .donations-btn {
    width: 304rpx;
    height: 72rpx;
    border-radius: 36rpx;
    color: #ffffff;
    font-size: 32rpx;
    background: linear-gradient(186deg, #10aeff 0%, #2680eb 100%);
    line-height: 72rpx;
    text-align: center;
    margin: 50rpx auto 40rpx;
  }
  .total {
    font-size: 24rpx;
    color: rgba($color: #000000, $alpha: 0.5);
    display: inline-block;
    .color {
      color: #f34e1c;
    }
  }
  .history {
    font-size: 28rpx;
    color: #2680eb;
    float: right;
  }

  .box {
    border-radius: 24rpx;
    background: #ffffff;
    margin: 24rpx;
    padding: 40rpx 24rpx 0;
    box-sizing: border-box;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 24rpx;
    }
  }

  .plan-list {
    display: flex;
    justify-content: space-between;
    .plan {
      width: 315rpx;
      background: #ffe1de;
      border-radius: 16rpx;
      padding: 22rpx;
      box-sizing: border-box;
      background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/shield-r.png');
      background-repeat: no-repeat;
      background-origin: content-box;
      background-size: 71rpx 84rpx;
      background-position-x: right;
      background-position-y: bottom;
    }
    .plan:nth-child(even) {
      background: #e7edfe;
      background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/shield-l.png');
      background-repeat: no-repeat;
      background-origin: content-box;
      background-size: 71rpx 84rpx;
      background-position-x: right;
      background-position-y: bottom;
    }
    .title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 36rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 10rpx;
    }
    .txt {
      height: 88rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 2;
    }
    .watch-btn {
      width: 136rpx;
      color: #ffffff;
      border-radius: 28rpx;
      font-size: 24rpx;
      background: #f34e1c;
      padding: 8rpx 0;
      text-align: center;
      margin: 20rpx 0 10rpx;
    }
  }

  .task {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .task-icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }
    .explain {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
      flex: 1;
    }
    .title {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      margin-bottom: 0;
    }
    .des {
      font-size: 24rpx;
      color: #b2b2b2;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .go-get {
      width: 120rpx;
      height: 56rpx;
      color: #c8161d;
      background: rgba($color: #c8161d, $alpha: 0.15);
      border-radius: 18rpx;
      font-size: 24rpx;
      text-align: center;
      line-height: 56rpx;
    }
  }

  .activity {
    display: flex;
    &-img {
      width: 256rpx;
      height: 192rpx;
      background: #feebe5;
      border-radius: 8rpx;
      margin-right: 20rpx;
      background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/activity-1.png');
      background-repeat: no-repeat;
      background-size: 224rpx 176rpx;
      background-position: center;
      margin-bottom: 50rpx;
    }
    &-txt {
      flex: 1;
    }
    &-title {
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
    }
    &-des {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
    }
  }
  .honor {
    margin: 24rpx;
    padding: 4rpx 24rpx;
    border-radius: 16rpx;
    background: #ffffff;
    &-list {
      display: flex;
      align-items: center;
    }
    &-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }
    &-view {
      flex: 1;
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .l {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
      }
      .r {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.3);
      }
    }
    .right-icon {
      width: 40rpx;
      height: 40rpx;
      vertical-align: middle;
    }
  }

  .plan {
    margin: 24rpx;
    border-radius: 24rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    display: flex;
    background: white;
    padding: 40rpx 24rpx 32rpx;
    height: 424rpx;
    display: block;
    .plan-title {
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
    }
    .plan-swiper {
      margin-top: 16rpx;
      width: 654rpx;
      height: 296rpx;
    }
    .plan-img {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>
